import { useEffect, useState } from 'react'
import { categoryList } from '@/api/article';
import { useNavigate, } from 'react-router-dom'
import { useTranslation } from "react-i18next";
const BaseCategory = () => {
    const navigate = useNavigate();
    const { t } = useTranslation();//切换语言触发的hooks
    const [catelist, setcateList] = useState([]);
    const [defaultIndex, setIndex] = useState(0);


    // 通过 改变下标改变高亮并传id
    const changeIndex = (index, value, label) => {
        // console.log(index, value, label);
        navigate(`/category/${value}`, {
            state: {
                label,
                replace: true,
            }
        });
        setIndex(index);
    }
    useEffect(() => {
        categoryList().then((res) => {

            setcateList(res.data.data);
            // console.log(res.data.data);
        })

    }, [catelist])
    return (
        <div className='category' >
            <a onClick={() => {
                navigate('/article')
            }} className={defaultIndex === 0 ? "on" : ''}>{t('所有')}</a>
            {
                catelist.length ? (
                    catelist.map((item, index) => {
                        return <a key={index} onClick={() => changeIndex(index + 1, item.value, item.label)}
                            className={defaultIndex === index + 1 ? "on" : ""}>{t(item.label)}</a>
                    })

                ) : (
                    <p>暂无category数据</p>
                )
            }

        </div>
    )

}

export default BaseCategory;